<h2>Contact of {{userName}}</h2>
<div *ngIf="msg" class="msg">{{msg}}</div>

<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
  <h3>{{contact.name | myAwesome}}</h3>
  <!--<h3 [myHighlight]="red">{{contact.name | myAwesome}}</h3>-->
  <div class="form-group">
    <label for="name">name</label>
    <input type="text" class="form-control" required [(ngModel)]="contact.name" name="name" #name="ngModel">
    <div [hidden]="name.valid" class="alert alert-danger">Name is required</div>
  </div>
  <br>
  <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
  <button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">Next Contact</button>
  <button type="button" class="btn" (click)="newContact()">New Contact</button>
</form>
